<template>
  <div>
    <!-- <div class="orderOne">
      <div class="FHimg">
        <img src="@/assets/fanhui.png" width="40px" height="40px">
      </div>
      <p>材料明细</p>
    </div> -->
    <van-nav-bar title="材料明细" left-text="返回" left-arrow @click-left="onClickLeft" />
    <el-table :data="tableData" height="92vh" stripe style="width: 100%,height:100%" :cell-style="handleCellStyle">
      <!-- <el-table-column  width="55">
      </el-table-column> -->
      <el-table-column prop="noid" label="序号 " width="120" />
      <el-table-column prop="status" label="投料状态" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.status == 1">计划</span>
          <span v-else-if="scope.row.status == 2">执行</span>
          <span v-else-if = "scope.row.status == 3">停止</span>
          <span v-else-if = "scope.row.status == 4">完成</span>
        </template>
      </el-table-column>
      <el-table-column prop="inventoryID" label="物料编码" width="120">
      </el-table-column>
      <el-table-column prop="rountNo" label="工艺号" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="planQty" label="计划量" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="actQty" label="已投量" show-overflow-tooltip>
      </el-table-column>
      
      <el-table-column prop="combination" label="组合配" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="isBomOutInv" label="方外料" show-overflow-tooltip>
        <template #default="scope">
          <span v-if="scope.row.eviType == 1">方内料</span>
          <span v-else-if="scope.row.eviType == 2">方外料</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import { ref,onMounted,onUnmounted } from 'vue'
import router from "@/router";

export default {
  name: "orderDetail",
  setup() {
    const gdh = ref("");
    const invid = ref("");
    const invname = ref("");
    const clqty = ref("");
    const tableData = ref([])
    const codeWhow = () => {}
    const onClickLeft = () => { router.push("/orderList");};
    onMounted(()=>{
      console.log(router.currentRoute.params.data)
      tableData.value = router.currentRoute.params.data;
    })
    onUnmounted(()=>{
      tableData.value=[]
    })
    return {
      gdh,
      invid,
      invname,
      clqty,
      codeWhow,
      onClickLeft,
      tableData,
      handleCellStyle
    }
  }
}
const handleCellStyle = ({ row, column, rowIndex, columnIndex }) => {
      if (column.property == "status") {
        console.log(column, columnIndex);
        console.log(row);
        var colorString = "";
        switch (row.status) {
          case 2:
            colorString = "#FFCC66";
            break;
          case 3:
            colorString = "crimson";
            break;
          case 4:
            colorString = "#66CC99";
            break;
          default:
            colorString = "white";
            break;
        }
        return `color:black;background:${colorString}`;
      }
    }

</script>
<style>
.orderOne {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  height: 50px;
  margin-bottom: 20px;
}

.orderOne p {
  color: white;
  font-size: 20px;
}


.FHimg {
  text-align: left;
  padding: 10px 0 0 10px;

}
</style>